<template>
  <div class="app-container" style="padding:1vh 4vw">
    <el-form ref="form" class="form-container" style="margin: 6vh 2vw;" :label-position="device() === 'mobile' ? 'top' : 'left'" :size="handleSize()">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="活动标题" label-width="105px">
            <el-autocomplete
              ref="autocomplete"
              v-model="postForm.activity"
              popper-class="my-autocomplete"
              placeholder="请输入活动标题" style="width: 60%"
              clearable
              :fetch-suggestions="querySearchAsync"
            >
              <i slot="suffix" class="el-icon-edit el-input__icon" @click="handleIconClick" />
              <template v-slot="{ item }">
                <div class="title">{{ item.value }}</div>
                <span class="zone">{{ item.index }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label-width="90px" label="活动评分:" class="postInfo-container-item">
            <el-rate
              v-model="postForm.rate"
              :max="5"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              :low-threshold="2"
              :high-threshold="5"
              show-score
              style="display:inline-block"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="活动反馈" label-width="105px">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="postForm.content"
          maxlength="200"
          rows="15"
          show-word-limit
        >
        </el-input>
      </el-form-item>

      <el-row type="flex" justify="end" style=";gap: 1rem">
        <el-tooltip class="item" effect="light" content="清空反馈" placement="left-start">
          <el-button circle type="danger" icon="el-icon-delete" @click="handleDelete" :size="handleSize()"/>
        </el-tooltip>
        <el-button circle type="primary" icon="el-icon-s-promotion" @click="handleSend" :size="handleSize()"/>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { changeFeedback } from '@/api/base/feedback'
import { indexActivities } from '@/api/admin/activity'
import { itemActivity } from '@/api/user/activity'
import { index, indexActivityies } from '@/api/user/activity'
import { indexUser } from '@/api/admin/user'

const defaultForm = {
  id: undefined,
  userId: undefined,
  activity: '',
  rate: 0,
  content: '',
  status: 0
}

export default {
  data() {
    return {
      title: '',
      activitiesList: [],
      postForm: Object.assign({}, defaultForm),
      loading: false,
      optionsMatching: [],
      timeout: null,
      scanBlurry: "",
    }
  },
  created() {
    this.getActivities()
    this.getTitle()
  },
  methods: {
    // 获取活动标题
    async getTitle() {
      const res = await itemActivity({id: this.$route.query.id})
      this.postForm.activity = res.data.title
    },
    // 获取活动列表
    async getActivities() {
      const res = await indexActivities()
      this.activitiesList = res.data.data
      // console.log(this.activitiesList)
    },
    // 返回当前 设备类型
    device() {
      return this.$store.state.app.device
    },
    // 根据当前设备类型 控制尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : ''
    },
    // 远程请求活动列表
    querySearchAsync(queryString, cb) {
      clearInterval(this.timeout);
      this.timeout = setTimeout(() => {
        indexActivityies(queryString).then((res) => {
          result = res.data.data
          //循环放到一个远程搜索需要的数组
          this.optionsMatching = result.map((title, zone) => {
            return {
              value: title,
              index: zone,
            };
          });
          this.activitiesList = this.optionsMatching
          cb(results)
        });
      }, 100);
    },
    handleIconClick(ev) {
      console.log(ev)
    },
    // 重置反馈内容
    handleDelete() {
      this.postForm.activity = ''
      this.postForm.content = ''
      this.postForm.rate = 0
      //this.state = null
      // 清除富文本编辑器内容
      // this.$refs.editor.setContent('')
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
    },
    // 根据用户学号获取 用户ID
    // getUserId(number) {
    //   const res = indexUser({ number: number})
    //   return res.data.data.id
    // },
    // 根据活动标题获取 活动id
    // getActivityId(title) {
    //   const res = indexActivities({ title: title})
    //   return res.data.data.id
    // },
    // 提交反馈
    handleSend() {
      changeFeedback({ userId: 1, activity: this.postForm.activity, rate: this.postForm.rate,
      content: this.postForm.content, status: 0}).then(() => {
        console.log(this.postForm)
        this.$notify({
          title: '成功',
          message: '发送成功',
          type: 'success',
          duration: 2000
        })
      }).catch(() =>{
        this.$notify({
          title: '失败',
          message: '发送失败',
          type: 'danger',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  //margin: 30px 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .form-container {
    //margin-top: 30px;
  }
}

.el-form-item__label{
  font-size: 16px;
  font-weight: 530;
  font-family: "微软雅黑",serif;
  letter-spacing: 1px;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .zone {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .zone {
      color: #ddd;
    }
  }
}
</style>

<!--return [-->
<!--{ 'value': '星际探索之旅', 'address': '2024年3月12日下午4时' },-->
<!--{ 'value': '创意手工艺工作坊', 'address': '2024年3月10日上午10时' },-->
<!--{ 'value': '爵士音乐之夜', 'address': '2024年3月9日晚上7时' },-->
<!--{ 'value': '瑜伽与冥想课程', 'address': '2024年3月15日早晨8时' },-->
<!--{ 'value': '科技创新展示', 'address': '2024年3月14日下午2时' },-->
<!--{ 'value': '甜点烹饪大赛', 'address': '2024年3月16日下午3时' },-->
<!--{ 'value': '摄影探索之旅', 'address': '2024年3月17日上午11时' },-->
<!--{ 'value': '社交舞蹈课程', 'address': '2024年3月11日晚上6时' },-->
<!--{ 'value': '户外拓展挑战', 'address': '2024年3月14日全天' },-->
<!--{ 'value': '未来职业发展讲座', 'address': '未来职业发展讲座' }-->
<!--]-->
